<template>
<div class="third-login">
  <divider style="color: white; font-size: 15px; font-weight: bold">{{$t('btn.thirdLogin')}}</divider>
  <div style="display: flex; justify-content: space-around; margin-top: 24px;">
    <div class="item" @click="wechatLogin">
      <div class="icon">
        <img :src="weChatImage" alt="">
      </div>
      <p>{{$t('btn.wechatLogin')}}</p>
    </div>
    <div class="item" style="margin-left:20px" @click="qqLogin">
      <div class="icon">
         <img :src="qqImage" alt="">
      </div>
      <p>{{$t('btn.qqLogin')}}</p>
    </div>
    <div class="item" style="margin-left:20px" @click="weiboLogin">
      <div class="icon">
         <img :src="weiBoImage" alt="">
      </div>
      <p>{{$t('btn.weiboLogin')}}</p>
    </div>
  </div>
</div>
</template>

<script>
import { localUser } from '@/assets/js/local'
import qqImage from '@/assets/img/myhome/qq.png'
import weChatImage from '@/assets/img/myhome/wechat.png'
import weiBoImage from '@/assets/img/myhome/weibo.png'
import { Divider } from 'vux'
import nativeBridge from '@/assets/js/nativeBridge'
import axios from '@/api/axiosApi'

export default {
  data () {
    return {
      qqImage: qqImage,
      weChatImage: weChatImage,
      weiBoImage: weiBoImage
    }
  },
  components: {
    Divider
  },
  methods: {
    wechatLogin () {
      const _self = this
      nativeBridge.wechatLogin(this, (arg) => {
        localUser.setItem('openid', arg.openid)
        localUser.setItem('sex', arg.sex)
        localUser.setItem('nickname', arg.nickname)
        localUser.setItem('headUrl', arg.headimgurl)

        _self.threeWayLogin({
          openid: arg.openid,
          headUrl: arg.headimgurl,
          sex: arg.sex,
          nickname: arg.nickname
        })
      })
    },
    qqLogin () {
      const _self = this
      nativeBridge.qqLogin(this, (arg) => {
        localUser.setItem('qqOpenid', arg.openid)
        localUser.setItem('sex', arg.gender === '男' ? 1 : 2)
        localUser.setItem('nickname', arg.nickname)
        localUser.setItem('headUrl', arg.figureurl_2)

        _self.threeWayLogin({
          qqOpenid: arg.openid,
          headUrl: arg.figureurl_2,
          sex: arg.gender === '男' ? 1 : 2,
          nickname: arg.nickname
        })
      })
    },
    weiboLogin () {
      const _self = this
      nativeBridge.weiboLogin(this, (arg) => {
        localUser.setItem('weiboOpenid', arg.id)
        localUser.setItem('sex', arg.gender === 'm' ? 1 : 2)
        localUser.setItem('nickname', arg.name)
        localUser.setItem('headUrl', arg.profile_image_url)
        _self.threeWayLogin({
          weiboOpenid: arg.id,
          headUrl: arg.profile_image_url,
          sex: arg.gender === 'm' ? 1 : 2,
          nickname: arg.name
        })
      })
    },
    threeWayLogin (params) {
      const _self = this
      axios.post(_self, '/v1/threeWayLogin', params, (data) => {
        nativeBridge.setJPushAlias(data.id)
        localUser.set(data)
        _self.$router.replace('/')
        _self.$store.dispatch('initJIM')
        _self.$store.commit('SET_LOGIN_ANMATION', '')
      }, () => {
        _self.$router.replace('/login/bindPhone')
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

.third-login {
  padding-left: 25%;
  padding-right: 25%;
  margin-top: 26%;
  -webkit-backface-visibility: hidden;
  color: #797878;
  font-size: 13px;

  .item {
    text-align: center;
    .icon {
      margin-left: 48px;
      width: 44px;
      height: 44px;
      line-height: 60px;
      font-size: 27px;
      text-align: center;
      color: #cccccc;
      margin: -1px;
      border: 1px solid #cccccc;
      border-radius: 50%;
      overflow: hidden;
      &:hover {
        color: #656565;
        border: 1px solid #656565;
      }
      img {
        width: 44px;
        height: 44px;
        background-size: cover
        background-repeat: no-repeat
      }
    }
    p {
      margin-top: 12px;
      color: white;
    }
  }
}
</style>

